<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>公告查阅情况</title>
    <!-- 导入字体图样式 -->
    <link rel="stylesheet" href="../../Public/iconfont/iconfont.css">
    <!-- 导入公共css样式 -->
    <link rel="stylesheet" href="../../Public/css/common.css">
    <!-- 导入头部导航的JS样式 -->
    <script src="../../Public/js/utils.js"></script>
    <!-- 导入JQuery库js样式 -->
    <script src="../../Public/js/jQuery.mini.js"></script>
    <!-- 导入文档的CSS样式 -->
    <link rel="stylesheet" href="../css/announcementAccessToTheSituation.css">
    <!-- 导入文档的JS样式 -->
    <!-- <script src="../js/announcement.js"></script> -->
    <!-- 头部导航 -->
    <script>
        window.onload = function() {      
            utils.addHeader(1, '公告查阅情况', ``, 1);      
            // utils.addFooter(1);  
        };
        $(function() {
            $('.cell').on('click', function() {
                window.location.assign("../personal/personalDetail.html")
            })
        })
    </script>
</head>

<body>
    <div class="read">
        <div class="read-a dian blue">
            <span>未读</span>
            <span>5</span>
        </div>
        <div class="read-a">
            <span>已读</span>
            <span>6</span>
        </div>
    </div>
    <div class="box mt-10 pl-20 ">
        <div class="item" style="display:block">
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                </div>
            </div>
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                </div>
            </div>
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                </div>
            </div>
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                    <span class="time">2022-01-09 10:45</span>
                </div>
            </div>
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                    <span class="time">2022-01-09 10:45</span>
                </div>
            </div>
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                    <span class="time">2022-01-09 10:45</span>
                </div>
            </div>
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                    <span class="time">2022-01-09 10:45</span>
                </div>
            </div>
            <div class="cell">
                <div class="kuang">
                    <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/组件_规范/__80px_u1056.png" alt="">
                </div>
                <div class="ifo">
                    <span class="name">吴珊珊</span>
                    <span class="position">销售专员</span>
                    <span class="time">2022-01-09 10:45</span>
                </div>
            </div>
        </div>
    </div>
    <div class="tip f14">没有更多数据了~</div>
    <script>
        window.addEventListener('load', function() {
            var read = document.querySelector('.read');
            var click = read.querySelectorAll('.read-a');
            var box = document.querySelector('.box');
            var items = box.querySelectorAll('.item');
            // var reads = document.querySelector('.read');
            for (var i = 0; i < click.length; i++) {
                click[i].setAttribute('index', i)
                click[i].onclick = function() {
                    // 第一个循环，清除类名
                    for (var i = 0; i < click.length; i++) {
                        click[i].className = 'read-a';
                    }
                    this.className = "read-a dian blue";
                    var index = this.getAttribute('index');

                    //第二个循环，让所有item隐藏起来
                    for (var i = 0; i < items.length; i++) {
                        items[i].style.display = 'none';
                    }
                    items[index].style.display = 'block';
                }

            }
        })
    </script>
</body>

</html>